import { Box, Stack, Button, ButtonGroup, Typography } from '@material-ui/core';
import React from 'react';

export const RowSelectBar = ({ statusInfo, rowSelectedKeys, status }) => {
  return (
    <Stack
      direction={'row'}
      justifyContent={'space-between'}
      alignItems={'center'}
      sx={{
        px: 2,
        pt: 2,
      }}
    >
      <Stack direction={'row'} spacing={2}>
        <Box>
          <Typography
            component={'span'}
            variant={'subtitle2'}
            color={'text.primary'}
          >
            待审批总额：
          </Typography>
          <Typography
            component={'span'}
            color={'success.main'}
            fontWeight={'bolder'}
          >
            ￥{statusInfo?.toBeApproveAmount}
          </Typography>
        </Box>
        <Box>
          <Typography
            component={'span'}
            variant={'subtitle2'}
            color={'text.primary'}
          >
            审批通过总额：
          </Typography>
          <Typography
            component={'span'}
            color={'success.main'}
            fontWeight={'bolder'}
          >
            ￥{statusInfo?.enterpriseApproveAmount}
          </Typography>
        </Box>
        <Box sx={{ typography: 'body1' }}>
          <Typography
            component={'span'}
            variant={'subtitle2'}
            color={'text.primary'}
          >
            审批拒绝总额：
          </Typography>
          <Typography
            component={'span'}
            color={'success.main'}
            fontWeight={'bolder'}
          >
            ￥{statusInfo?.rejectApproveAmount}
          </Typography>
        </Box>
        <Box sx={{ typography: 'body1' }}>
          <Typography
            component={'span'}
            variant={'subtitle2'}
            color={'text.primary'}
          >
            总计金额：
          </Typography>
          <Typography
            component={'span'}
            color={'success.main'}
            fontWeight={'bolder'}
          >
            ￥{statusInfo?.totalApproveAmount}
          </Typography>
        </Box>
      </Stack>
      <ButtonGroup variant={'contained'}>
        {status === 1 && (
          <Button disabled={rowSelectedKeys?.length === 0}>审批退回</Button>
        )}
        {status === 1 && (
          <Button disabled={rowSelectedKeys?.length === 0}>审批通过</Button>
        )}
        <Button>导出</Button>
      </ButtonGroup>
    </Stack>
  );
};
